<template>
	<div>
		<van-nav-bar :title="goodData.name">
		</van-nav-bar>
		<div>
			<van-swipe lazy-render>
				<van-swipe-item v-for="(image,key) in srcList" :key="key">
					<van-image width="100vw" height="20rem" fit="cover" :src="image" @click="showImageView(key)" />
				</van-swipe-item>
			</van-swipe>
			<div style="padding: 1rem;">
				<div v-if="showSeller">
					<table  @click="sellerPageShow" >
						<tr>
							<td>
								<van-image style="margin: 1vw;" width="10vw" height="10vw" fit="cover"
									:src="seller.headImg" round />
							</td>
							<td>
								<strong style="margin: 3vw;font-size: 2rem;">{{seller.name}}</strong>
							</td>

						</tr>
						<tr>
							<td style="color: gray;font-size: 0.5rem;">
								等级: {{seller.level}} 级
							</td>
						</tr>
					</table>
				</div>
				<h3>
					<strong>
						{{goodData.name}}
					</strong>
				</h3>
				<van-row>
					<van-col span="8">
						<div style="color: red;float: left;font-size: 1.5rem;">
							<strong>
								&yen;{{priceShow}}
							</strong>
						</div>
					</van-col>
					<van-col offset="8" span="8" style="text-align: right;">
						<div>
							<div style="color: gray;font-size: 0.5rem;margin: 0.5rem;">
								还剩:{{goodData.number}}件
							</div>
						</div>
					</van-col>
				</van-row>



				<div style="margin-top: 0.5rem;">
					<div v-for="(t,index) in textList" :key="index">
						{{t}}
					</div>
				</div>
			</div>
		</div>
		<van-popup :before-close="beforeChatPageClose" v-model:show="chatPageShow" position="right"
			:style="{ width: '100%', height: '100%' }" closeable close-icon="arrow-left" close-icon-position="top-left"
			lazy-render>
			<ChatPage ref="chatPage"></ChatPage>
		</van-popup>
		<van-popup v-model:show="prepayPageShow" position="right" :style="{ width: '100%', height: '100%' }" closeable
			close-icon="arrow-left" close-icon-position="top-left" lazy-render>
			<OrderGoodsPage :data="prepayPageData" :order="orderGoods" :close="closeOrderGoods"></OrderGoodsPage>
		</van-popup>
		
		<van-action-bar>
			<van-action-bar-icon icon="friends-o" text="卖家" @click="sellerPageShow" />
			<van-action-bar-icon icon="chat-o" text="私聊" @click="chatButtonHandler" />
			<van-action-bar-button type="danger" text="立即购买" @click="showPayPageButton" />
		</van-action-bar>
	</div>
</template>

<script>
	import url from '@/assets/url.json';
	import ChatPage from './ChatPage.vue';
	import {
		showImagePreview,
		showNotify
	} from 'vant';
	import OrderGoodsPage from './OrderGoodsPage.vue';

	export default {
		props: {
			goodData: Object,
			showPayPage: Function,
			openSellerPage: Function
		},
		components: {
			ChatPage,
			OrderGoodsPage,
		},
		mounted() {
			console.log(this.goodData);
			let l = this.goodData.imgSrc.split(';')
			for (let key in l) {
				this.srcList.push(url.ip + '/' + l[key]);
			}
			this.textList = this.goodData.describes.split('\n');

			this.priceShow = this.changePriceType(this.goodData.price);
			this.getSellerUser();
		},
		data() {
			return {
				orderGoods: {

				},
				buyFormInfo: {

				},
				srcList: [],
				textList: [],
				priceShow: '',
				seller: {
					name: '',
					headImg: '',
					level: 0
				},
				showSeller: false,
				chatPageShow: false,
				prepayPageShow: false,
				
				prepayPageData: {
					sellerName: '卖家用户名',
					goodName: '商品名',
					price: '648.66',
					number: 1,
					oid: '',
					id: '',
					statu: '已支付',
					time: '2023-4-23',
					imgSrc: '',
					headImgSrc: '',
					money: ""
				}
			}
		},
		methods: {
			sellerPageShow(){
				if((typeof this.openSellerPage)==='function'){
					this.openSellerPage(this.goodData.uid);
				}
			},
			
			closeOrderGoods() {
				this.prepayPageShow = false
			},
			showPayPageButton() {

				// this.showPayPage(this.goodData);
				this.$axios({
					url: url.ip + '/api-goods' + '/goods/order',
					method: 'POST',
					data: {
						gid: this.goodData.id,
						number: 1,
						address: 'none',
					},
					headers: {
						token: this.$cookies.get('token'),
					}
				}).then((res) => {
					console.log(res.data.data);
					if (res.data.code !== 0) {
						console.log(res);
						showNotify({
							type: 'danger',
							message: res.data.message
						});
					} else {
						this.orderGoods = res.data.data
						this.prepayPageData.goodName = this.goodData.name;
						this.prepayPageData.price = this.priceShow;
						this.prepayPageData.sellerName = this.seller.name;
						this.prepayPageData.imgSrc = this.srcList[0];
						this.prepayPageData.headImgSrc = this.seller.headImg;
						this.prepayPageData.oid = res.data.data.id;
						this.orderGoods.money = this.priceShow;
						let name = [
							"未支付",
							"",
							"未发货",
							"已发货",
							"已完成",
							"已停止"
						]
						this.prepayPageData.statu = name[res.data.data.status];

						showNotify({
							type: 'success',
							message: '创建订单成功'
						});
						this.prepayPageShow = true;
					}
				}).catch((err) => {
					console.log(err);
				})

			},
			changePriceType(price) {
				let str = price;
				let numberPrice = Number.parseInt(str);
				if (numberPrice < 10) {
					str = '00' + str;
				} else {
					if (numberPrice < 100) {
						str = '0' + str;
					}
				}

				let arr = str.split('');
				arr.splice(-2, 0, '.');
				str = arr.join('');
				return str;
			},
			showImageView(position) {
				showImagePreview({
					images: this.srcList,
					startPosition: position,
				});
			},
			getSellerUser() {
				this.$axios({
					url: url.ip + '/api-user/user/id',
					method: 'GET',
					params: {
						id: this.goodData.uid
					},
					headers: {
						token: this.$cookies.get('token'),
					}
				}).then((res) => {
					let tData = res.data.data[0];
					this.seller.name = tData.userName;
					this.seller.headImg = url.ip + '/' + tData.headImgSrc;
					this.seller.level = tData.level;
					this.showSeller = true;
				}).catch((err) => {
					console.log(err);
				})
			},
			chatButtonHandler() {
				this.openChatPage(this.$cookies.get('userId'), this.goodData.uid, this.seller.name);
			},
			beforeChatPageClose() {
				this.$refs.chatPage.beforePageClose();
				return true;
			},
			openChatPage(uid, suid, name) {
				this.chatPageShow = true;
				console.log(uid, suid, name);
				setTimeout(() => {
					this.$refs.chatPage.getData(uid, suid, name);
				}, 100)
			},

		},
	}
</script>

<style>
</style>